<template>
  <div>
    <t-card>
      <t-form :data="searchFormdata" layout="inline" label-width="auto">
        <t-form-item label="内容名称" name="ticketName">
          <t-input v-model="searchFormdata.contentName" placeholder="请输入内容名称" type="search" />
        </t-form-item>
        <t-form-item label="内容状态" name="enabled">
          <t-select v-model="searchFormdata.enabled" placeholder="请选择内容状态" clearable>
            <t-option v-for="item in EnabledStatus" :key="item" :label="enabledStatusDict[item]" :value="item" />
          </t-select>
        </t-form-item>
        <t-button :loading="dataLoading" @click="handleSearchClick">
          查询
        </t-button>
      </t-form>
      <t-divider />
      <div>
        <t-button @click="handleAddTicketConentClick">
          添加内容
        </t-button>
      </div>
      <!-- @vue-expect-error -->
      <t-table :data="tableData" :columns="tableColumns" row-key="id" cell-empty-content="-" :pagination="pagination" :loading="dataLoading" @page-change="handlePageChange">
        <template #op="{ row }">
          <t-row align="center" :gutter="8">
            <t-button @click="handleEditTicketConentClick(row)">
              编辑
            </t-button>
          </t-row>
        </template>
      </t-table>
    </t-card>
    <ticket-conent-form-dialog
      :id="editedId"
      v-model:visible="dialogVisible"
      :data="formData" @success="handleSuccess"
    />
  </div>
</template>
<script setup lang="ts">
import type { PaginationProps, TableProps } from 'tdesign-vue-next'
import { reactive, ref } from 'vue'

import { EnabledStatus } from '@/api/model/common'
import type { TicketContentRes } from '@/api/model/ticket'
import { getTicketContentPageList } from '@/api/ticket'
import { enabledStatusDict } from '@/utils/dict/common'

import type { TicketConentFormDialogData } from './component/TicketConentFormDialog.vue'
import TicketConentFormDialog from './component/TicketConentFormDialog.vue'

const searchFormdata = reactive({
  contentName: '',
  enabled: '' as EnabledStatus | '',
})
type TableData = TicketContentRes

const tableData = ref<TableData[]>([])
const tableColumns: TableProps<TableData>['columns'] = [
  {
    colKey: 'id',
    title: '内容ID',
  },
  {
    colKey: 'contentName',
    title: '内容名称',
  },
  {
    colKey: 'enabled',
    title: '状态',
    cell: (_, { row }) => {
      return enabledStatusDict[row.enabled]
    },
  },
  {
    colKey: 'op',
    title: '操作',
  },
]
const pagination = reactive<PaginationProps>({
  current: 1,
  pageSize: 15,
  total: 0,
})
const dataLoading = ref(false)
function fetchData() {
  dataLoading.value = true
  getTicketContentPageList({ page: pagination.current!, size: pagination.pageSize!, ...searchFormdata }).then((res) => {
    tableData.value = res.data
    pagination.total = res.total
  }).finally(() => {
    dataLoading.value = false
  })
}
fetchData()
function handleSearchClick() {
  pagination.current = 1
  fetchData()
}
function handlePageChange(pageInfo: PaginationProps) {
  pagination.current = pageInfo.current
  pagination.pageSize = pageInfo.pageSize
  fetchData()
}

const DEFAULT_FORM_DATA: TicketConentFormDialogData = {
  contentName: '',
  enabled: EnabledStatus.DISABLED,
}
const editedId = ref('')
const formData = ref(DEFAULT_FORM_DATA)
const dialogVisible = ref(false)
function handleAddTicketConentClick() {
  editedId.value = ''
  formData.value = DEFAULT_FORM_DATA
  dialogVisible.value = true
}

function handleEditTicketConentClick(row: TableData) {
  editedId.value = row.id
  formData.value = row
  dialogVisible.value = true
}

function handleSuccess() {
  dialogVisible.value = false
  fetchData()
}
</script>
<style scoped>

</style>
